<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
   
    <meta charset="utf-8" />
		
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<title>用户登录</title>
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link href="<%=request.getContextPath() %>/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link href="<%=request.getContextPath() %>/resources/css/login.css" rel="stylesheet">
	<link href="<%=request.getContextPath() %>/resources/img/tea.png" rel="icon">
	<!--font-awesome 核心我CSS 文件-->
	<link href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
 	<script src="<%=request.getContextPath() %>/resources/jquery/jquery-1.11.3.min.js"></script>
    <script src="<%=request.getContextPath() %>/resources/bootstrap/js/bootstrap.min.js"></script>
     <script src="<%=request.getContextPath() %>/resources/js/login.js"></script>		
    
	</head>
	<body>

	<div class="container">
		<div class="form row">
			<form class="form-horizontal col-sm-offset-3 col-md-offset-3" id="login_form">
				<!-- <h3 class="form-title">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;登录</h3> -->
				<div style="position: relative;border: 1px solid #8FCA98;width: 120px;height:120px;margin: 5px 5px 5px 55px;border-radius: 50%;">
					<img src="<%=request.getContextPath() %>/resources/img/default.png" style="width: 120px;height: 120px;left:0;top: 0;border-radius: 50%;" id="userImg"/>
				</div>
				<div class="col-sm-9 col-md-9">
					<div class="form-group">
						<i class="fa fa-user fa-lg"></i>
						<input class="form-control required" id="username" type="text" placeholder="用户名" name="username" autofocus="autofocus" maxlength="20"/>
					</div>
					<div class="form-group">
							<i class="fa fa-lock fa-lg"></i>
							<input class="form-control required" id="password" type="password" placeholder="密码" name="password" maxlength="20"/>
					</div>
					<div class="form-group">
						<a href="register" id="register_btn" class="">创建新用户</a>
					</div>
					<div class="form-group">
						<input type="button" class="btn btn-success pull-right login_btn" value="登录" id="login" />   
					</div>
				</div>
			</form>
		</div>
 
		
	</div>
 <script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/EffectItem.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/Effect.js"></script>
    <script type="text/javascript">
         new Effect({
        //特效图片，多张图片时传入数组，单个图片时传入字符串
        effectUrl : ["<%=request.getContextPath() %>/resources/img/a1.png","<%=request.getContextPath() %>/resources/img/a2.png","<%=request.getContextPath() %>/resources/img/a3.png","<%=request.getContextPath() %>/resources/img/a4.png","<%=request.getContextPath() %>/resources/img/a5.png","<%=request.getContextPath() %>/resources/img/a6.png"],
        //特效旋转，1/true为旋转，0/false为不旋转
        rotate : 1,
        //特效方向，left/right/up/down
        direction : "up"
    });
    </script>
</body>


</html>

<%-- <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
   
    <meta charset="utf-8" />
		
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<title>用户登录</title>
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link href="<%=request.getContextPath() %>/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link href="<%=request.getContextPath() %>/resources/css/login.css" rel="stylesheet">
	<!--font-awesome 核心我CSS 文件-->
	<link href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
 	<script src="<%=request.getContextPath() %>/resources/jquery/jquery-1.11.3.min.js"></script>
    <script src="<%=request.getContextPath() %>/resources/bootstrap/js/bootstrap.min.js"></script>
     <script src="<%=request.getContextPath() %>/resources/js/login.js"></script>		
    
	</head>
	<body>
		<!--
			基础知识：
			网格系统:通过行和列布局
			行必须放在container内
			手机用col-xs-*
			平板用col-sm-*
			笔记本或普通台式电脑用col-md-*
			大型设备台式电脑用col-lg-*
			为了兼容多个设备，可以用多个col-*-*来控制；
		-->
	<div class="container">
		<div class="form row">
			<form class="form-horizontal col-sm-offset-3 col-md-offset-3" id="login_form">
				<h3 class="form-title">登录</h3>
				<div style="position: relative;border: 5px solid lightblue;width: 150px;height:150px;margin: 5px auto;border-radius: 50%;">
					<img src="<%=request.getContextPath() %>/resources/img/default.png" style="width: 140px;height: 140px;left:0;top: 0;border-radius: 50%;" id="userImg"/>
				</div>
				<div class="col-sm-9 col-md-9">
					<div class="form-group">
						<i class="fa fa-user fa-lg"></i>
						<input class="form-control required" id="username" type="text" placeholder="Username" name="username" autofocus="autofocus" maxlength="20"/>
					</div>
					<div class="form-group">
							<i class="fa fa-lock fa-lg"></i>
							<input class="form-control required" id="password" type="password" placeholder="Password" name="password" maxlength="20"/>
					</div>
					<div class="form-group">
						<a href="register" id="register_btn" class="">创建用户</a>
					</div>
					<div class="form-group">
						<input type="button" class="btn btn-success pull-right" value="Login " id="login" />   
					</div>
				</div>
			</form>
		</div>
 
		
	</div>
 <script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/EffectItem.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/Effect.js"></script>
    <script type="text/javascript">
         new Effect({
        //特效图片，多张图片时传入数组，单个图片时传入字符串
        effectUrl : ["<%=request.getContextPath() %>/resources/img/a3.png","<%=request.getContextPath() %>/resources/img/a2.png","<%=request.getContextPath() %>/resources/img/a1.png","<%=request.getContextPath() %>/resources/img/a4.png","<%=request.getContextPath() %>/resources/img/a5.png","<%=request.getContextPath() %>/resources/img/a6.png"],
        //特效旋转，1/true为旋转，0/false为不旋转
        rotate : 1,
        //特效方向，left/right/up/down
        direction : "up"
    });
    </script>
</body>


</html>
 --%>